<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <div>
        <p>项目名称: {{this.$route.query.project_name}}</p>
        <p>模块名称: {{this.$route.query.version_name}}</p>
        <el-button  size="small" @click="scp_notice()" type="primary" outline>通知</el-button>
        <br>
      </div>
      <el-table ref="form" :data="form" :model="form" row-key="id" :tree-props="{children: 'more_scp_data', hasChildren: 'hasChildren'}">
        <el-table-column prop="feature_name" label="需求名" :width="450" fixed="left">
            <template slot-scope="props">
              <span v-if="props.row.in_rate === ''">{{props.row.feature_name}}</span>
              <span v-else-if="props.row.in_rate <= 70" style="color:red;">{{props.row.feature_name}}</span>
              <span v-else style="color:green;">{{props.row.feature_name}}</span>
            </template>
        </el-table-column>

        <el-table-column prop="branch_name" label="模块" :width="175">
          <template slot-scope="props">
              <div v-if="props.row.branch_name === ''">缺少记录</div>
              <div v-else>
                {{props.row.branch_name}}
              </div>
          </template>
        </el-table-column>

        <el-table-column prop="ticket_id" label="分支名称" :width="150">
        </el-table-column>

        <el-table-column prop="srcTagName" label="基于分支" :width="150">
          <template slot-scope="props">
              <div v-if="props.row.branch_name === ''">缺少记录</div>
              <div v-else>
                {{props.row.srcTagName}}
              </div>
          </template>
        </el-table-column>

        <el-table-column prop="in_rate" label="增量覆盖率" :width="100">
          <template slot-scope="props">
              <div v-if="props.row.in_rate === ''">缺少记录</div>
              <div v-else>
                {{props.row.in_rate}}%
              </div>
          </template>
        </el-table-column>

        <el-table-column prop="all_rate" label="总量覆盖率" :width="100">
          <template slot-scope="props">
              <div v-if="props.row.all_rate === ''">缺少记录</div>
              <div v-else>
                {{props.row.all_rate}}%
              </div>
          </template>
        </el-table-column>

        <el-table-column prop="qa_list" label="需求负责人" :width="200">
          <template slot-scope="props">
              <div v-if="props.row.qa_list === ''">缺少记录</div>
              <div v-else>
                {{props.row.qa_list}}
              </div>
          </template>
        </el-table-column>

        <el-table-column label="详情链接" :width="200" fixed="right">
          <template slot-scope="props">
              <div v-if="props.row.in_link === ''">缺少记录</div>
              <div v-else>
                <div slot="reference">
                  <el-link target="_blank" :href="props.row.in_link" type="primary">增量覆盖率详情</el-link>
                </div>
              </div>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5,10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalRow">
      </el-pagination>
    </div>
  </el-card>
</template>

  <script>
    import {api, getRequest, postRequest} from "@/api/commit";
    export default {
      name : "ScpVersionList",
      components: {
      },
      data() {
        return {
          currentPage: 1,
          totalRow: 0,
          pageSize: 10 ,
        }
      },
      methods: { 
        scp_notice(){
          getRequest(api['scp_notice'],{
            "threshold":70,
            "version": this.$route.query.version_name,
            }).then((res) => {
            console.info(res.resultReturn)
          }, (error) => {
            console.info(error)
          })
        },
        handleSizeChange(val) {
          this.pageSize = val;
          this.init_data();
        },
        handleCurrentChange(val) {
          this.currentPage = val;
          this.init_data();
        },
        init_data() {
          getRequest(api['get_version_scp_info'],{
            "page_size":this.pageSize,
            "page":this.currentPage,
            "project_name":"SPMKT",
            "version": this.$route.query.version_name,
            }).then((res) => {
            res = res.resultReturn
            this.form= res.data
            this.totalRow=res.total
          }, (error) => {
            console.info(error)
          })
        },
      },
      created () {
        this.init_data()
      }
    }
  </script>